<template>
  <div class="top">
    <go-back />
    <div class="top__btn">
      <a-space size="middle">
        <a-button size="large" @click="checkSignUsers"> 查看已签到用户 </a-button>
        <a-popconfirm title="确定要推送该提醒?" ok-text="确定" cancel-text="取消" @confirm="pushRemind">
          <a-button size="large" type="danger"> 推送面试提醒 </a-button>
        </a-popconfirm>
        <a-button size="large" type="primary" @click="addUser">
          <PlusOutlined />
          添加预约用户
        </a-button>
      </a-space>
    </div>
  </div>
  <a-table :columns="columns" :data-source="data" rowKey="app_user_id" :pagination="false">
    <template #action="{ record }">
      <a @click="checkUserDetail(record.app_user_id)">查看用户信息</a>
    </template>
  </a-table>
  <!-- 子组件 -->
  <choose-mp-users ref="openDrawer" @chosUser="chosUser" />
  <check-mp-users-detail ref="openUserDetailDrawer" :app_user_id="userId" />
</template>

<script lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import { defineComponent, onMounted, ref, Ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import GoBack from '../../../../components/goback.vue'
import ChooseMpUsers from '../../../../components/ChooseMpUsers.vue'
import CheckMpUsersDetail from '../../../../components/CheckMpUsersDetail.vue'
import { get, post } from '../../../../utils/request/request'

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '班级',
    dataIndex: 'class_name',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  name: string
  class_name: string
}

const data: Ref<DataItem[]> = ref([])

// 子组件调用父组件方法
const useEmitfromChildEffect = (token: string) => {
  const route = useRoute()
  const id = route.params.id as string
  const { getTableData, postUserToReserve } = useHttpEffect(token)
  const chosUser = async (app_user_id: number) => {
    await postUserToReserve(id, app_user_id).then((res) => {
      getTableData(id)
    })
  }
  return { chosUser }
}

// 上面三个按钮
const useBtnEffect = (id: string, token: string) => {
  const router = useRouter()
  const route = useRoute()
  // 查看已签到用户
  const checkSignUsers = () => {
    router.push({
      name: 'sessionSignList',
      params: {
        id: id,
        title: route.params.title
      },
      query: {
        interview_id: route.query.interview_id
      }
    })
  }
  // 添加预约用户
  const openDrawer = ref()
  const addUser = () => {
    openDrawer.value.showModal()
  }
  // 推送面试提醒
  const pushRemind = async () => {
    const res: any = await post(`/admin/api/v1/recruitment/interview/batch/${id}/remind`, {}, token)
  }

  return { checkSignUsers, openDrawer, addUser, pushRemind }
}

// 表格操作栏相关逻辑
const useTableActionEffect = () => {
  const openUserDetailDrawer = ref()
  const userId = ref<number>()
  const checkUserDetail = (app_user_id: number) => {
    userId.value = app_user_id
    openUserDetailDrawer.value.showDrawer()
  }
  return { openUserDetailDrawer, checkUserDetail, userId }
}

// 网络请求相关逻辑
const useHttpEffect = (token: string) => {
  const getTableData = async (id: string) => {
    const res: any = await get(`/admin/api/v1/recruitment/interview/batch/${id}/users/reserve?page=1&limit=1000`, token)
    console.log(res)
    if (res?.data == null) {
      message.info('没有预约用户')
    } else {
      data.value = res.data
    }
  }
  const postUserToReserve = async (id: string, app_user_id: number) => {
    console.log(id)
    console.log(app_user_id)
    const postRes: any = await post(`/admin/api/v1/recruitment/interview/batch/${id}/user/reserve`, { app_user_id: app_user_id }, token)
    console.log(1)
    console.log(postRes)
    if (postRes?.status_code === 0) {
      message.success('添加用户成功')
    }
  }
  return { getTableData, postUserToReserve }
}

export default defineComponent({
  components: {
    PlusOutlined,
    GoBack,
    ChooseMpUsers,
    CheckMpUsersDetail
  },
  setup() {
    const route = useRoute()
    const id = route.params.id as string
    const token: string = localStorage.getItem('token') as string
    const { chosUser } = useEmitfromChildEffect(token)
    const { checkSignUsers, openDrawer, addUser, pushRemind } = useBtnEffect(id, token)
    const { openUserDetailDrawer, checkUserDetail, userId } = useTableActionEffect()
    const { getTableData } = useHttpEffect(token)

    onMounted(async () => {
      await getTableData(id)
    })
    return {
      chosUser,
      columns,
      data,
      checkSignUsers,
      openUserDetailDrawer,
      checkUserDetail,
      userId,
      openDrawer,
      addUser,
      pushRemind
    }
  }
})
</script>

<style lang="less" scoped>
.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
}
</style>
